<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>
<script src="vue.js"></script>
<body>
    <!-- 
        1.v-if
        2.v-show
        3.v-bind
        4.v-on
        5.v-model
     -->
     <div id="app">
         <input type="text"id="txt" v-focus v-color="'blue'">
     </div>

     <div id="app2">
        <p v-color="blue">自定义的全局指令app2也可以</p>
     </div>
     <script>
         //document.getElementById('txt').focus();//Vue不提倡直接操作DOM
            // 在Vue中自定义指令分两种：
            // 1.全局指令
            // 2.私有指令

            // 1.全局指令
            // 自定义指令，在定义时不需要加v-前缀，但是在绑定时，必须加v-前缀

            Vue.directive('focus',{
                inserted:function(el){
                     //el是一个形参，他代表的是这条指令所绑定的DOM元素，el是原生dom
                     el.focus();

                }
            });
            // 简写
            // Vue.directive('focus',function(el){ //如果只想在bind和update上注册指令，就可以使用简写
            //     el.focus();
            // })

            Vue.directive('color',{
                bind:function(el,binding){
                    el.style.color=binding.value;
                    console.log(binding.name);
                    console.log(binding.value);
                    console.log(binding.expression);
                }
            })

            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'请输入姓名',
                  
                }
            })

            var vm2 = new Vue({
                el:'#app2',
                data:{
                    blue:'pink',
                }
            })
     </script>
</body>
</html>